<template>
  <div class="homecontainer">
    <!-- //首页轮播图 -->
        <swiper :list="list" :isfull="true"></swiper>
  <!-- 六宫格 -->
  <ul class="mui-table-view mui-grid-view mui-grid-9">
		<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/newsList" >
		  <img src="../../images/menu1.png" alt="">
		  <div class="mui-media-body">新闻资讯</div></router-link>
    </li>
		<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/photoList">
		  <img src="../../images/menu2.png" alt="">
		  <div class="mui-media-body">图片分享</div></router-link>
    </li>
		<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/shoppinglist">
		  <img src="../../images/menu3.png" alt="">
		  <div class="mui-media-body">商品购买</div></router-link>
    </li>
		<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		  <img src="../../images/menu4.png" alt="">
		  <div class="mui-media-body">留言反馈</div></a>
    </li>
		<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		  <img src="../../images/menu5.png" alt="">
		  <div class="mui-media-body">视频专区</div></a>
    </li>
		<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		  <img src="../../images/menu6.png" alt="">
		  <div class="mui-media-body">联系我们</div></a>
    </li>
		
	</ul> 
      
  </div>
</template>

<script>
//按需导入
import {Toast} from 'mint-ui'
//2.导入子组件
import swiper from '../subcomponent/swiper.vue'

export default {
  data(){
    return {
      list:[],//轮播图数组
     
    }
  },
  created(){
    this.getlunbo();
   
  },
  methods:{
    getlunbo(){//获取轮播图的方法
      this.$http.get("api/getlunbo").then( (result) => {
        // console.log(result.body)
        if(result.body.status===0){//成功
          this.list=result.body.message
        }
        else{//失败
          Toast("获取轮播图失败")
        }   
      } )
    },
  },
  components:{
    swiper//3.注册子组件挂载在components上
  }
  
}
</script>

<style lang="less" scoped>


.mui-grid-view.mui-grid-9{
  background-color: #fff;
  
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell{
  border-bottom: none;
  border-right:none;
  img{
    width:60px;
  }
}
</style>




